<script>
export default {
  name: "antPage",
  data() {
    return {
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      current: 2,
      pageSize: 10,
      total: 50,
      visible: false,
      formInline: {
        user: '',
        password: '',
      },
    };
  },
  methods: {
    handleSubmit() {
      console.log(this.formInline);
    },
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      console.log(current)
    },
    // 对话框
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
  }
}
</script>

<template>
  <div>ant组件
    <a-button type="primary">
      Primary
    </a-button>
    <a-button>Default</a-button>
    <a-button type="dashed">
      Dashed
    </a-button>
    <a-button type="danger">
      Danger
    </a-button>
    <a-config-provider :auto-insert-space-in-button="false">
      <a-button type="primary">
        按钮
      </a-button>
    </a-config-provider>
    <a-button type="primary">
      按钮
    </a-button>
    <a-button type="link">
      Link
    </a-button>

    <a-icon type="shrink"/>
    <a-icon type="up-square"/>


    <a-dropdown>
      <a class="ant-dropdown-link" @click="e => e.preventDefault()">
        Hover me
        <a-icon type="down"/>
      </a>
      <a-menu slot="overlay">
        <a-menu-item v-for="num in 5" :key="num">
          <a href="javascript:;">1st menu item</a>
        </a-menu-item>
      </a-menu>
    </a-dropdown>


    <a-pagination
        v-model="current"
        :page-size-options="pageSizeOptions"
        :total="total"
        show-size-changer
        :page-size="pageSize"
        @showSizeChange="onShowSizeChange"
    >
      <template slot="buildOptionText" slot-scope="props">
        <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
        <span v-if="props.value === '50'">全部</span>
      </template>
    </a-pagination>


    <a-button type="primary" @click="showModal">
      Open Modal
    </a-button>
    <a-modal v-model="visible" @ok="handleOk" :footer="null" width="350px">
      <a-form-model layout="horizontal" :model="formInline" @submit="handleSubmit" @submit.native.prevent>
        <a-form-model-item>
          <a-input v-model="formInline.user" placeholder="Username">
            <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
          </a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-input v-model="formInline.password" type="password" placeholder="Password">
            <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
          </a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-button
              type="primary"
              html-type="submit"
          >
            Log in
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<style scoped lang="less">
//深层覆盖
/deep/ .ant-modal-body {
  padding: 40px 40px 10px;
}

//::v-deep
//>>>
.ant-btn-danger {
  background-color: green;
}
</style>